<template>
<div>


	<myheader  :img_src="img_src" />

	<h1>用户中心</h1>


	用户名:{{ userinfo.username }}

	手机号:{{ userinfo.phone | myfilter }}

	头像上传:

	<van-uploader :after-read="afterRead" v-show="showupload" />


	<van-image round  width="20rem" height="20rem" :src="img_src"  />


	<br /><br />


	多文件上传控件:

	<van-uploader multiple  v-model="filelist" :max-size="1024 * 200" @oversize="oversize" :after-read="afterRead_list"  :before-read="beforeread" />




</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';



export default{

	//声明组件
	components:{

		'myheader':myheader,
		
	},
	//声明变量
	data(){

		return {

			userinfo:{phone:""},
			"img_src":"",
			filelist:[],
			showupload:false

		}


	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				value = value.slice(0,3);

				return value + "********";


			}

	},
	//初始化方法
	mounted(){

		//发送请求
			this.axios.get(
				'http://localhost:5000/userinfo/',{

					params:{

						id:localStorage.getItem("id"),
						token:localStorage.getItem("token")
					}

				}).then((result) =>{

					console.log(result);

					if(result.data.code != 200){

						this.$toast.fail(result.data.msg);

						//localStorage.removeItem("username");

						//window.location.href = "/login";

					}else{

						//赋值操作
						this.userinfo = result.data;

						this.img_src = this.upload_dir+this.userinfo.img;


					}

			});

	},
	//声明方法
	methods:{

		//文件类型校验
		beforeread:function(file){

			console.log(file.type);

			if(file.type === "text/plain"){

				this.$toast.fail("您不能上传文本");
				return false;

			}

			return true;

		},
			//文件体积限制
			oversize:function(file){

				this.$toast.fail("对不起，您的文件过大，超出了200kb");

			},
		//多文件上传
		afterRead_list:function(file){


			//遍历文件列表
			for(let i=0,l=file.length;i<l;i++){

					console.log(file[i]);

					this.afterRead(file[i]);

			}

		},
		//上传文件方法
		afterRead:function(file){


				//声明表单
				let data = new FormData();

				data.append("file",file.file);

				data.append("id",localStorage.getItem("id"));

				//创建文件上传实例
				const myaxios = this.axios.create({withCredentials:false});

				myaxios({

					method:"post",
					url:"http://localhost:5000/upload/",
					data:data

				}).then(result => {

					console.log(result);

					//将头像地址赋值
					this.img_src = "http://localhost:5000/static/upload/"+result.data.filename;


				})





		}

		


	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }

</style>